<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>常规学科-常规报表</title>
    <#include "/include/resource.html"/>
    <style>
        .specialtable tr td {
            padding: 1px !important;
        }
    </style>
    <script type="application/javascript">
        function confirmToCancel(id) {
            bootbox.confirm("Confirm the delete action!？", function (result) {
                if (result) {
                    $.ajax({
                        type: "POST",
                        url: "${base}/admin/battery/delete?id=" + id,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            if (typeof (data) != 'undefined') {

                                $('#myModal').modal('show');
                            }
                        },
                        error: function () {

                        }
                    });
                }
            });
        }
    </script>
    <style>
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #2f2d2d;
            text-align: center;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "/include/header.html"/>
    <#include "/include/main-sidebar.html"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                <small><h3>用户数据分析</span></h3></small>
            </h1>
            <ol class="breadcrumb">
                <li><i class="fa fa-dashboard"></i></li>
                <li class="active">报表</li>
            </ol>
        </section>
        <section class="content">
            <!--同伴欺负各类型均分分析 begin-->
            <div class="row">
                <div class="col-md-6">
                    <!-- LINE CHART -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">拓新率</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart" style="height:500px" id="chart_txl">

                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <!-- LINE CHART -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">老带新</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="box-body" style="height:500px">
                                <div class="box-body">
                                    <div class="chart" style="height:500px" id="chart_ldx">

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--同伴欺负各类型均分分析 end-->
            <!--“受欺负者”人数分析 begin-->
            <div class="row">
                <div class="col-md-6">
                    <!-- LINE CHART -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">续费率</h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart" style="height:500px" id="chart_xfl">

                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <!-- LINE CHART -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">人数比率</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart" style="height:500px" id="chart_zt">

                            </div>
                        </div>
                    </div>

                </div>
            </div>


<!--“频繁受欺负者”学生一览-->
</section>
</div>
<!-- 弹出窗口 -->
<#include "/include/modal.html"/>
<#include "/include/footer.html"/>
<div class="control-sidebar-bg"></div>
</div>
<#include "/include/js_footer.html"/>
<script src="${base}/dist/js/echarts.js"></script>

<script type="application/javascript">
    var chart_txl = echarts.init(document.getElementById('chart_txl'));
    // 指定图表的配置项和数据
    var chart_txl_option = option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['廊坊','通州','涿州']
        },
        series: [
            {
                name:'拓新率',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'廊坊'},
                    {value:310, name:'通州'},
                    {value:234, name:'涿州'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart_txl.setOption(chart_txl_option);
    var chart_xfl = echarts.init(document.getElementById('chart_xfl'));
    // 指定图表的配置项和数据
    var chart_xfl_option = option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['廊坊','通州','涿州']
        },
        series: [
            {
                name:'续费率',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'廊坊'},
                    {value:310, name:'通州'},
                    {value:234, name:'涿州'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart_xfl.setOption(chart_xfl_option);

    var chart_ldx = echarts.init(document.getElementById('chart_ldx'));
    // 指定图表的配置项和数据
    var chart_ldx_option = option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['廊坊','通州','涿州']
        },
        series: [
            {
                name:'老带新',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'廊坊'},
                    {value:310, name:'通州'},
                    {value:234, name:'涿州'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart_ldx.setOption(chart_ldx_option);

    var chart_zt = echarts.init(document.getElementById('chart_zt'));
    // 指定图表的配置项和数据
    var cchart_zt_option = option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['廊坊','通州','涿州']
        },
        series: [
            {
                name:'骑手分布',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'廊坊'},
                    {value:310, name:'通州'},
                    {value:234, name:'涿州'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart_zt.setOption(chart_zt_option);
</script>
</body>

</html>
